import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import React, { useRef, useState } from 'react';
import { useModel } from 'umi';

import * as c from '@/services/consts';
import * as api from '@/services/userLoginLog';
import * as utils from '@/utils/utils';
import { PageContainer } from '@ant-design/pro-components';

const getLoginInfo = (log: API.UserLoginLog) => {
  let info = '';
  if (log.country == '中国') {
    info += `${log.country} ${log.province} ${log.city}`;
    if (log.net && log.net != '' && log.net.indexOf('内网') == -1) {
      info += ` [${log.net}]`;
    }
  } else {
    info = log.country ?? '';
  }

  return info;
};

const UserLoginLogList: React.FC = () => {
  const [productId, setProductId] = useState<string | undefined>(undefined);
  // const [username, setUsername] = useState<string>('');

  const actionRef = useRef<ActionType>();

  const { getProduct, getProductMenuItems } = useModel(
    'useGlobalModel',
    (model) => ({
      getProduct: model.getProduct,
      getProductMenuItems: model.getProductMenuItems,
    }),
  );

  const productMenuItems = getProductMenuItems(true);

  let columns: ProColumns<API.UserLoginLog>[] = [
    {
      title: '状态',
      align: 'center',
      width: 80,
      dataIndex: 'failed',
      sorter: false,
      search: false,
      valueEnum: {
        true: { status: 'Error', text: '' },
        false: { status: 'Success', text: '' },
      },
    },
    {
      title: '产品',
      align: 'center',
      width: 100,
      dataIndex: 'productId',
      sorter: false,
      search: false,
      renderText: (_, record) => {
        if (record.productId) {
          const product = getProduct(record.productId);
          if (product) {
            return product.name;
          }
        }
        return '';
      },
    },
    {
      title: '用户名',
      dataIndex: 'username',
      sorter: false,
      //search: false,
      renderText: (_, record) => {
        return record.username ?? record.userName;
      },
    },
    {
      title: '平台',
      // align: 'center',
      width: 130,
      dataIndex: 'platform',
      sorter: false,
      search: false,
    },
    {
      title: '版本',
      align: 'center',
      width: 60,
      dataIndex: 'ver',
      sorter: false,
      search: false,
    },
    {
      title: '时区',
      align: 'center',
      width: 80,
      dataIndex: 'timezone',
      sorter: false,
      search: false,
    },
    {
      title: '语言',
      align: 'center',
      width: 80,
      dataIndex: 'lang',
      sorter: false,
      search: false,
    },
    {
      title: '渠道',
      // align: 'center',
      width: 100,
      dataIndex: 'channel',
      sorter: false,
      search: false,
    },
    {
      title: '设备ID',
      dataIndex: 'deviceid',
      sorter: false,
    },
    {
      title: '设备型号',
      dataIndex: 'deviceModel',
      sorter: false,
      search: false,
    },
    {
      title: '设备系统',
      dataIndex: 'deviceOs',
      sorter: false,
      search: false,
    },
    {
      title: '时间',
      align: 'center',
      dataIndex: 'logTime',
      sorter: false,
      search: false,
      renderText: (_, record) => {
        return utils.formatUtcToLocal(record.logTime);
      },
    },
    {
      title: 'IP',
      align: 'center',
      width: 120,
      dataIndex: 'ip',
      sorter: false,
      search: false,
    },
    {
      title: '位置',
      sorter: false,
      search: false,
      render: (_, record) => {
        return (
          <>
            <span>{getLoginInfo(record)} / {record.ipProvince}</span>
          </>
        );
      },
    },
    {
      title: '运营商',
      align: 'center',
      width: 120,
      dataIndex: 'ipNetwork',
      sorter: false,
      search: false,
    },
    {
      title: 'Geoip运营商',
      align: 'center',
      width: 120,
      dataIndex: 'geoipIsp',
      sorter: false,
      search: false,
    },
    {
      title: '错误信息',
      dataIndex: 'failedMessage',
      valueType: 'textarea',
      ellipsis: true,
      sorter: false,
      search: false,
    },
    {
      title: '服务器',
      dataIndex: 'server',
      sorter: false,
      search: false,
      render: (_, record) => {
        let text = record.from ?? record.server ?? '';
        if (record.host) {
          text += `(${record.host})`;
        }
        return <>{text}</>;
      },
    },
    {
      title: 'Key',
      dataIndex: 'accountKey',
      hideInTable: true,
    },
  ];

  return (
    <PageContainer>
      <ProTable
        rowKey="id"
        options={{
          fullScreen: false,
          reload: true,
          setting: false,
          density: false,
        }}
        columnEmptyText={''}
        actionRef={actionRef}
        columns={columns}
        // search={false}
        toolbar={{
          menu: {
            type: 'tab',
            activeKey: productId,
            items: productMenuItems,
            onChange: (tabKey) => {
              setProductId(tabKey as string);
            },
          },
          // search: {
          //   onSearch: (value: string) => {
          //     setUsername(value);
          //   },
          // },
        }}
        toolBarRender={() => {
          return [];
        }}
        pagination={{
          defaultPageSize: 15,
          pageSizeOptions: ['15', '30', '60', '100'],
          hideOnSinglePage: true,
          // current: pageCurrent,
          // total: totalCount,
        }}
        params={{
          mode: 'all',
          productId:
            productId && productId !== c.DefaultOptionAll.key
              ? parseInt(productId)
              : undefined,
        }}
        request={api.loginlist}
      />
    </PageContainer>
  );
};

export default UserLoginLogList;
